import React, { useState } from 'react'
import axios from 'axios';
import styles from '../css分支/Money_chong.module.css'
import { Arrow, ChatO, Circle } from '@react-vant/icons';
import { Grid, Image, Tabs } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import { ArrowLeft, BalanceO, Points } from '@react-vant/icons';

export default function Money_chong() {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const handleSubmit = async (event) => {
    event.preventDefault(); // 阻止表单默认提交行为

    // 获取输入的值
    const amount = event.target.amount.value;
    const paymentMethod = event.target.payment.value;
    
    // 模拟充值逻辑
    if (amount && paymentMethod) {
      setLoading(true);
      try {
        // 后端余额添加
        let res = await axios.post('http://localhost:3000/xzx/chongzhi', {
          amount
        });
        // 调用后端接口生成支付参数
        const response = await axios.get(`http://localhost:3000/xzx/createOrder?qian=${amount}`);
        const { data } = response;
        // 跳转到支付宝支付页面
        console.log(data);
        window.location.href = data;
      } catch (error) {
        console.error('支付失败:', error);
      } finally {
        setLoading(false);
      }
    } else {
      alert('请填写完整的充值信息！');
    }
  };
  return (
    <div>
      <div className={styles.head}>
        <ArrowLeft style={{ marginLeft: '0.2rem' }} onClick={() => { navigate('/money') }} />
        <p style={{ fontSize: '0.22rem' }}>充值余额</p>
        <p style={{ marginRight: '0.1rem' }}>
          <Points />
        </p>
      </div>
      <div className={styles.body1}>
        <div className={styles.container}>
          {/* <h1>充值页面</h1> */}
          <form id="rechargeForm" onSubmit={handleSubmit}>
            <label htmlFor="amount">充值金额（元）：</label>
            <input
              type="number"
              id="amount"
              name="amount"
              min="1"
              required
              placeholder="请输入充值金额"
            />

            <div className={styles.paymentMethods}>
              <label>选择支付方式：</label>
              <label>
                <input type="radio" name="payment" value="wechat" required /> 微信支付
              </label>
              <label>
                <input type="radio" name="payment" value="alipay" /> 支付宝
              </label>
              <label>
                <input type="radio" name="payment" value="bankcard" /> 银行卡
              </label>
            </div>

            <button type="submit">立即充值</button>
          </form>
        </div>
      </div>
    </div>
  )
}
